/*头部*/
body {
	background: #fafafa;
}

.title {
	display: flex;
	height: 5rem;
	color: #fff;
	background: #f697b7;
	padding: 1.5rem;
	font-size: 16px;
	margin-top: 2.45rem;
}

.title-left {
	flex: 1;
	text-align: center;
	 margin-top: -.2rem;
}

.title-left p {
	margin-top: .2rem;
}

.integral {
	flex: 2.8;
}

.integral-content p {
	font-size: 14px;
}

.integral-box {
	display: flex;
}

.integral-content {
	flex: 1;
	text-align: center;
	font-size: 18px;
}

.user-name:nth-of-type(2) {
	font-size: 14px;
}

.user-picture {
	width: 3.3rem;
	border-radius: 50%;
	vertical-align: -.6rem;
}

.user-name {
	display: inline-block;
	margin-left: .5rem;
}

.function-title-content::before {
	position: absolute;
	left: 2.8rem;
	top: .45rem;
	content: "";
	width: 1rem;
	height: .9rem;
	background: url(../img/201805241652.png) center center no-repeat;
	background-size: cover;
}

.function-title {
	position: absolute;
    top: 7rem;
    left: 0;
    right: 0;
    display: flex;
    width: 90%;
    margin: auto;
    background: #fff;
    box-shadow: 0 1px 4px 0px #d8d1cf;
    border: 1px solid #e2edf1;
    border-radius: 20px;
    padding: .2rem 0px;
    top: 9.45rem;
}

.function-title-content {
	flex: 1;
	text-align: center;
}

.function-title-content span {
	display: block;
	width: 100%;
	font-size: 13px;
	color: #323232;
	padding-top: .2rem;
	padding-bottom: .1rem;
}

/*菜单*/
.warp {
	margin-bottom: .7rem;
	padding: 0 0 0 1.5rem;
	background: #fff;
	border-top: 1px solid #d6d7dc;
	border-bottom: 1px solid #d6d7dc;
}

.warp-first {
	margin-top: 1.7rem;
}

.warp .icon {
	width: .9rem;
	vertical-align: -.3rem;
}

.warp .warp-box {
	padding: .9rem 0 .9rem .8rem;
	font-size: 16px;
    color: #323232;
	border-bottom: 1px solid #e4e5ed;
}

.warp .warp-box:nth-of-type(3) {
	border: none;
}

.warp .warp-box span {
	margin-left: .6rem;
}

.warp-box .arrow {
	    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    background: url(../img/down.png) center center no-repeat;
    background-size: 100%;
    float: right;
    margin-top: .5rem;
    margin-right: 1.5rem;
}

.warp-box .arrow2 {
    transform: rotateZ(180deg);
}

.warp-details {
	box-shadow: 0px 0px 14px #dcdfe0;
	border-radius: 8px;
	margin-left: -1rem;
	margin-right: 1.2rem;
	margin-top: .8rem;
	padding: .5rem .5rem .2rem .5rem;
	position: relative;
}

.warp-details img {
	width: 6.2rem;
    height: 6.2rem;
}

.warp-details-content {
	position: absolute;
    top: .9rem;
    right: .5rem;    
    width: 64%;
    vertical-align: 1.2rem;
    font-size: 14px;  
    box-sizing: border-box;
    padding-left:.5rem;

}
.warp-details-content p{
	display: -webkit-box;
    width: 95%;
    height: 2.5rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
      font-size: 1rem;
}

.warp-price p{
	height:auto;
}

.warp-price p:FIRST-OF-TYPE {
	color: #f797b7;
	padding: .2rem 0;
	font-size: 16px;
	
}

.warp-price p:nth-of-type(2) {
	color: #909090;
    font-size: .8rem;
}

.warp-details-content sj {
	text-decoration: line-through;
}

.warp-details-state, .warp-details-state1 {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 4rem;
	height: 4rem;
	background: url(../img/201805251602.png) no-repeat;
	background-size: cover;
}

.warp-details-state1 {
	background: url(../img/201805251602-1.png) no-repeat;
	background-size: cover;
}